<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            margin: 20px;
        }
        input{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <button>
        全选
    </button>
    <button>
        不选
    </button>
    <button>
        反选
    </button>
    </br>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

    <script>
        // ## 1.实现全选，不选，反选
        // `num.checked = true选中   num.checked = false不选`

        var btn = document.getElementsByTagName('button')
        var checkbox = document.getElementsByTagName('input')

        btn[0].onclick = function(){
            for(var a = 0;a < checkbox.length;a++){
                checkbox[a].checked = true
            }
        }
        btn[1].onclick = function(){
            for(var a = 0;a < checkbox.length;a++){
                checkbox[a].checked = false
            }
        }
        btn[2].onclick = function(){
            for(var a = 0;a < checkbox.length;a++){
                if(checkbox[a].checked){
                    checkbox[a].checked = false
                }else{
                    checkbox[a].checked = true
                }
            }
        }
    </script>
</body>
</html>